<script setup lang="ts">
import { computed, h } from 'vue';
import { Card, Descriptions, DescriptionsItem, Table, Tag } from 'ant-design-vue';
import type { TableColumnsType } from 'ant-design-vue';

// 定义货币对配置数据类型
interface CurrencyPairConfig {
  baseCurrency?: string;
  quoteCurrency?: string;
  precision?: number;
  tickSize?: number;
  tradingEnabled?: boolean;
  quotingEnabled?: boolean;
  minTradeAmount?: number;
  maxTradeAmount?: number;
  lastUpdateTime?: string;
}

// 定义props
interface Props {
  configData?: Record<string, CurrencyPairConfig>;
}

const props = withDefaults(defineProps<Props>(), {
  configData: () => ({})
});

// 格式化最小变动单位
const formatTickSize = (tickSize?: number) => {
  if (!tickSize) return '-';
  return tickSize.toFixed(6);
};

// 格式化交易量
const formatAmount = (amount?: number) => {
  if (!amount) return '-';
  if (amount >= 1000000) {
    return `${(amount / 1000000).toFixed(2)}M`;
  }
  if (amount >= 1000) {
    return `${(amount / 1000).toFixed(2)}K`;
  }
  return amount.toLocaleString();
};

// 格式化日期
const formatDate = (dateStr?: string) => {
  if (!dateStr) return '-';
  try {
    return new Date(dateStr).toLocaleString('zh-CN');
  } catch {
    return dateStr;
  }
};

// 获取配置状态
const getConfigStatus = (config: CurrencyPairConfig) => {
  if (config.tradingEnabled && config.quotingEnabled) {
    return { color: 'green', text: '完全启用' };
  }
  if (config.tradingEnabled || config.quotingEnabled) {
    return { color: 'orange', text: '部分启用' };
  }
  return { color: 'red', text: '已禁用' };
};

// 表格数据
const configTableData = computed(() => {
  if (!props.configData) return [];

  return Object.entries(props.configData).map(([pair, config]) => ({
    key: pair,
    pair,
    baseCurrency: config.baseCurrency,
    quoteCurrency: config.quoteCurrency,
    precision: config.precision,
    tickSize: config.tickSize,
    tradingEnabled: config.tradingEnabled,
    quotingEnabled: config.quotingEnabled,
    minTradeAmount: config.minTradeAmount,
    maxTradeAmount: config.maxTradeAmount,
    lastUpdateTime: config.lastUpdateTime
  }));
});

// 表格列定义
const configColumns: TableColumnsType = [
  {
    title: '货币对',
    dataIndex: 'pair',
    key: 'pair',
    width: 100,
    fixed: 'left'
  },
  {
    title: '基础货币',
    dataIndex: 'baseCurrency',
    key: 'baseCurrency',
    width: 100,
    customRender: ({ text }) => text || '-'
  },
  {
    title: '计价货币',
    dataIndex: 'quoteCurrency',
    key: 'quoteCurrency',
    width: 100,
    customRender: ({ text }) => text || '-'
  },
  {
    title: '精度',
    dataIndex: 'precision',
    key: 'precision',
    width: 80,
    customRender: ({ text }) => (text ? `${text}位` : '-'),
    sorter: (a: any, b: any) => (a.precision || 0) - (b.precision || 0)
  },
  {
    title: '最小变动',
    dataIndex: 'tickSize',
    key: 'tickSize',
    width: 120,
    customRender: ({ text }) => formatTickSize(text as number),
    sorter: (a: any, b: any) => (a.tickSize || 0) - (b.tickSize || 0)
  },
  {
    title: '交易状态',
    dataIndex: 'tradingEnabled',
    key: 'tradingEnabled',
    width: 100,
    customRender: ({ text }) => {
      const enabled = text as boolean;
      return h(Tag, { color: enabled ? 'green' : 'red' }, () => (enabled ? '启用' : '禁用'));
    },
    filters: [
      { text: '启用', value: true },
      { text: '禁用', value: false }
    ],
    onFilter: (value: any, record: any) => record.tradingEnabled === value
  },
  {
    title: '报价状态',
    dataIndex: 'quotingEnabled',
    key: 'quotingEnabled',
    width: 100,
    customRender: ({ text }) => {
      const enabled = text as boolean;
      return h(Tag, { color: enabled ? 'green' : 'red' }, () => (enabled ? '启用' : '禁用'));
    },
    filters: [
      { text: '启用', value: true },
      { text: '禁用', value: false }
    ],
    onFilter: (value: any, record: any) => record.quotingEnabled === value
  },
  {
    title: '最小交易量',
    dataIndex: 'minTradeAmount',
    key: 'minTradeAmount',
    width: 120,
    customRender: ({ text }) => formatAmount(text as number),
    sorter: (a: any, b: any) => (a.minTradeAmount || 0) - (b.minTradeAmount || 0)
  },
  {
    title: '最大交易量',
    dataIndex: 'maxTradeAmount',
    key: 'maxTradeAmount',
    width: 120,
    customRender: ({ text }) => formatAmount(text as number),
    sorter: (a: any, b: any) => (a.maxTradeAmount || 0) - (b.maxTradeAmount || 0)
  },
  {
    title: '更新时间',
    dataIndex: 'lastUpdateTime',
    key: 'lastUpdateTime',
    width: 180,
    customRender: ({ text }) => formatDate(text as string)
  }
];
</script>

<template>
  <Card title="货币对配置" :bordered="false">
    <div v-if="!configData || Object.keys(configData).length === 0" class="empty-state">
      <div class="empty-text">暂无货币对配置数据</div>
    </div>
    <div v-else>
      <!-- 配置概览 -->
      <div class="config-overview">
        <div class="config-grid">
          <div v-for="(config, pair) in configData" :key="pair" class="config-col">
            <Card size="small" class="config-card">
              <div class="config-header">
                <h4>{{ pair }}</h4>
                <Tag :color="getConfigStatus(config).color">{{ getConfigStatus(config).text }}</Tag>
              </div>
              <div class="config-content">
                <Descriptions size="small" :column="1" bordered>
                  <DescriptionsItem label="基础货币">
                    <Tag color="blue">{{ config.baseCurrency || '-' }}</Tag>
                  </DescriptionsItem>
                  <DescriptionsItem label="计价货币">
                    <Tag color="green">{{ config.quoteCurrency || '-' }}</Tag>
                  </DescriptionsItem>
                  <DescriptionsItem label="精度">
                    <span class="precision-value">{{ config.precision || 0 }} 位小数</span>
                  </DescriptionsItem>
                  <DescriptionsItem label="最小变动">
                    <span class="tick-value">{{ formatTickSize(config.tickSize) }}</span>
                  </DescriptionsItem>
                  <DescriptionsItem label="交易状态">
                    <Tag :color="config.tradingEnabled ? 'green' : 'red'">
                      {{ config.tradingEnabled ? '启用' : '禁用' }}
                    </Tag>
                  </DescriptionsItem>
                  <DescriptionsItem label="报价状态">
                    <Tag :color="config.quotingEnabled ? 'green' : 'red'">
                      {{ config.quotingEnabled ? '启用' : '禁用' }}
                    </Tag>
                  </DescriptionsItem>
                  <DescriptionsItem v-if="config.minTradeAmount" label="最小交易量">
                    <span class="amount-value">{{ formatAmount(config.minTradeAmount) }}</span>
                  </DescriptionsItem>
                  <DescriptionsItem v-if="config.maxTradeAmount" label="最大交易量">
                    <span class="amount-value">{{ formatAmount(config.maxTradeAmount) }}</span>
                  </DescriptionsItem>
                </Descriptions>
              </div>
              <div v-if="config.lastUpdateTime" class="config-footer">
                <small>更新时间: {{ formatDate(config.lastUpdateTime) }}</small>
              </div>
            </Card>
          </div>
        </div>
      </div>

      <!-- 详细表格 -->
      <div class="config-table" style="margin-top: 24px">
        <h3>配置详情</h3>
        <Table
          :columns="configColumns"
          :data-source="configTableData"
          :pagination="false"
          size="small"
          :scroll="{ x: 1200 }"
        />
      </div>
    </div>
  </Card>
</template>

<style scoped>
.empty-state {
  text-align: center;
  padding: 40px 0;
}

.empty-text {
  color: #999;
  font-size: 14px;
}

.config-overview {
  margin-bottom: 24px;
}

.config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 16px;
}

.config-col {
  min-width: 0;
}

.config-card {
  height: 100%;
  transition: all 0.3s ease;
}

.config-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.config-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.config-header h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}

.config-content {
  margin-bottom: 12px;
}

.precision-value,
.tick-value,
.amount-value {
  font-family: 'Monaco', 'Menlo', monospace;
  font-weight: 500;
  color: #374151;
}

.config-footer {
  text-align: center;
  color: #9ca3af;
  border-top: 1px solid #f3f4f6;
  padding-top: 8px;
}

.config-table h3 {
  margin-bottom: 16px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 600;
}

:deep(.ant-descriptions-item-label) {
  font-weight: 500;
  color: #6b7280;
}

:deep(.ant-descriptions-item-content) {
  color: #374151;
}
</style>
